<script>
import { ref, onMounted } from "vue-demi";
import store from "../../store";

export default {
  setup() {
    function skipBack() {
      window.location.replace("../Home/Home.html");
      console.log(2);
    }
    let info = ref({});
    let ind = localStorage.getItem("index_2");
    onMounted(() => {
      store.sendVolunteer2().then((val) => {
        info.value = val.data[ind];
      });
    });

    return { info, skipBack };
  },
};
</script>

<template>
  <div class="box">
    <div class="back" @click="skipBack">
      <img src="../../assets/箭头-左.png" alt="" />
    </div>
    <div class="title">志愿者</div>
    <div class="name">姓名：{{ info.name }}</div>
    <div class="sel">个人简介</div>
    <div class="border">
      <span class="lab">书院|专业</span>
      <div class="text">
        <div class="grade">
          书院：<br />
          <div class="content" style="color: #414141">{{ info.insit }}</div>
        </div>
        <div class="zhuanye">
          专业：<br />
          <div class="content" style="color: #414141">{{ info.major }}</div>
        </div>
      </div>
    </div>

    <div class="border">
      <span class="lab">服务内容</span>
      <div class="text">
        可提供辅导科目:<br />
        <div class="content" style="color: #414141">{{ info.subject }}</div>
      </div>
    </div>
    <div class="border">
      <span class="lab">联系方式</span>
      <div class="text">
        联系方式
        <div class="wenzi2">(请在课下或周末时间联系呦)</div>
        <br />
        <div class="content" style="color: #414141">{{ info.contact }}</div>
      </div>
    </div>
    <div class="touch">
      联系我们：qq981547177

      <div class="content"></div>
    </div>
  </div>
</template>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background-image: url(../../../public/bgp.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.back {
  height: 20px;
}
.wenzi2 {
  display: inline-block;
  color: gray;
  font-size: 10px;
  font-weight: normal;
}
.back > img {
  width: 30px;
  height: 30px;
  margin-top: 10px;
  margin-left: 10px;
}
.title {
  height: 140px;
  line-height: 120px;
  font-size: 60px;
  color: aliceblue;
  font-weight: 900;
  text-indent: 30px;
}
.name {
  height: 70px;
  line-height: 40px;
  font-size: 40px;
  color: aliceblue;
  font-weight: 750;
  text-indent: 25px;
  text-align: center;
}
.sel {
  width: 160px;
  height: 50px;
  line-height: 50px;
  background-color: rgb(13, 110, 4);
  color: white;
  font-size: 30px;
  font-weight: 550;
  text-align: center;
  border-radius: 20px;
  margin: auto;
}

.border {
  height: 120px;
  text-align: center;
  width: 360px;
  background-color: white;
  border-radius: 10px;
  margin: 14px auto;
}
.lab {
  display: block;
  height: 35px;
  width: 183px;
  margin: auto;
  /* text-align: center; */
  font-size: 20px;
  font-weight: 550;
  background-image: url(../../../public/lable.png);
  background-size: contain;
  color: white;
}
.text {
  float: left;
  left: 0;
  font-size: 20px;
  text-indent: 10px;
  font-weight: 650;
  text-align: left;
}
.grade {
  float: left;
  width: 180px;
  left: 0;
  text-align: left;
}
.zhuanye {
  float: left;
  width: 180px;
  text-align: left;
}
.touch {
  color: white;
  font-size: 25px;
  text-indent: 15px;
  font-size: 550;
}
.content {
  float: auto;
  /* left: 0; */
  font-size: 20px;
  text-indent: 10px;
  font-weight: 500;
}
</style>
